<!--
 * @Author: 灰灰
 * @Date: 2022-01-07 20:30:10
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-09 12:16:06
 * @Description: 
-->

<template>
  <el-row :gutter="10">
    <el-divider>long 图表-table结合</el-divider>
    <table-chart :option="chartOption"
                 :cols="cols"></table-chart>
  </el-row>
</template>

<script>
import chartMixin from '@/mixins/echartMixins/baseChartOption'
import TableChart from '@/components/TableChart';
export default {
  mixins: [chartMixin],
  components: {
    TableChart
  },
  props: {
    needImg: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      cols: []
    }
  },
  mounted () {
    setTimeout(() => {
      this.loadData()
    }, 1000);
  },
  methods: {
    loadData () {
      this.configLegend({
        data: ['line']
      })
      this.configDataZoom(false);
      this.configXAxis({ data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] });
      const seriesLine = this.generateLineData({
        name: 'line',
        data: [150, 230, 224, 218, 135, 147, 260]
      });
      const seriesBar = this.generateBarData([150, 230, 224, 28, 35, 147, 26])
      const seriesBar2 = this.generateBarData([50, 20, 22, 28, 85, 47, 79])
      const series = [seriesLine, seriesBar, seriesBar2];
      this.configSeries(series);

      // 生成table 数据

      this.cols.push({
        prop: 'col1',
        label: '星期1的是发',
      })
      this.cols.push({
        prop: 'col2',
        label: '星期2的是发',
      })
      this.cols.push({
        prop: 'col3',
        label: '星期3的是发',
      })
      this.cols.push({
        prop: 'col4',
        label: '星期4的是发',
      })
      this.cols.push({
        prop: 'col5',
        label: '星期5的是发',
      })
      this.cols.push({
        prop: 'col6',
        label: '星期6的是发',
      })
      this.cols.push({
        prop: 'col7',
        label: '星期7的是发',
      });
      this.cols.push({
        prop: 'col8',
        label: '星期8的是发',
      })
      this.cols.push({
        prop: 'col9',
        label: '星期9的是发',
      })
      this.cols.push({
        prop: 'col10',
        label: '星期10的是发',
      })
      this.cols.push({
        prop: 'col11',
        label: '星期11的是发',
      })
      this.cols.push({
        prop: 'col12',
        label: '星期12的是发',
      })
      this.cols.push({
        prop: 'col13',
        label: '星期13的是发',
      })
      this.cols.push({
        prop: 'col14',
        label: '星期14的是发',
      })
      this.cols.push({
        prop: 'col15',
        label: '星期15的是发',
      })
    }
  }
}
</script>

<style>
</style>